<script setup>
import { onMounted, ref } from 'vue'
import { useRoomStore } from '@/stores/roomStore.js'
import { useDevStore } from '@/stores/deviceStore.js'
const useRoom = useRoomStore()
const useDev = useDevStore()
const isShow = ref(false)
const parentBorder = ref(false)
const childBorder = ref(false)
// const addForm = ref({})
const addr = ref('')
const detail = ref('')
const devices = ref([])
const showDev = ref([])


const param = ref({
  currentPage: 1,
  pageSize: 20
})
const deleteRoom = () => {
  console.log('删除')
}
const changeRoom = () => {
  console.log('修改')
}

const options = ref([
  {
    value: '湛江市',
    label: '湛江市',
    children: [
      {
        value: '赤坎区',
        label: '赤坎区'
      },
      {
        value: '霞山区',
        label: '霞山区'
      },
      {
        value: '坡头区',
        label: '坡头区'
      },
      {
        value: '麻章区',
        label: '麻章区'
      },
      {
        value: '遂溪县',
        label: '遂溪县'
      },
      {
        value: '徐闻县',
        label: '徐闻县'
      },
      {
        value: '廉江市',
        label: '廉江市'
      },
      {
        value: '雷州市',
        label: '雷州市'
      },
      {
        value: '吴川市',
        label: '吴川市'
      }
    ]
  }
])

const initShowDev = () => {
  for (let i = 0; i < useDev.devInfo.length; i++) {
    showDev.value.push({
      key: useDev.devInfo[i].devId,
      label: useDev.devInfo[i].devName,
      })
  }
}

const submit = () => {
  const formData = ref({
    province: '广东省',
    city: addr.value[0],
    district: addr.value[1],
    detail: detail.value,
    devIds: devices.value
  })
  useDev.addRoomDevs(formData.value)
  isShow.value = false
}


const handleChange = () => {
  console.log(addr.value)
}

onMounted(async () => {
  // 这里是页数 随机 1 - useDev.devTotlCount/20 + 1 页
  await useDev.getTotlCount()
  param.value.currentPage = Math.floor(Math.random() * (useDev.devTotlCount / 20)) + 1
  await useDev.getDevData(param.value)
  initShowDev()
})
</script>
<template>
  <el-button id="add" plain @click="isShow = true"> 新增房间 </el-button>
  <el-table :data="useRoom.roomInfo" :border="parentBorder" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">
            地址: {{ props.row.roomAddress.city }}{{ props.row.roomAddress.district
            }}{{ props.row.roomAddress.detail }}
          </p>
          <h3>相关设备：</h3>
          <el-table :data="props.row.devs" :border="childBorder">
            <el-table-column label="设备ID" prop="devId" />
            <el-table-column label="设备名称" prop="devName" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="房间ID" prop="roomId" />
    <el-table-column label="房间评分" prop="star" />
    <el-table-column label="使用情况" prop="roomStatus" />
    <el-table-column fixed="right" label="操作">
      <template #default>
        <el-button link type="primary" size="small" @click="deleteRoom">删除</el-button>
        <el-button link type="primary" size="small" @click="changeRoom">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="isShow" width="660" align-center>
    <template #header>
      <h3>添加房间</h3>
    </template>
    <el-form
      ref="form"
      style="max-width: 600px"
      label-width="auto"
      label-position="top"
      size="large"
    >
      <el-form-item label="请选择所在地址">
        <el-cascader
          v-model="addr"
          :options="options"
          @change="handleChange"
          placeholder="请选择地区"
        />
      </el-form-item>
      <el-form-item label="请输入详细地址">
        <el-input v-model="detail" placeholder="请输入详细地址" clearable />
      </el-form-item>
      <el-form-item label="请选择相关联的设备">
        <el-transfer v-model="devices" :data="showDev" :titles="['可选设备','已选设备']"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
#add {
  position: relative;
  left: 92%;
}
</style>
